<template>
  <view class="layout">
    <view class="content">
      <navigator :url="'/pages/preview/preview?index=' + index" class="item" v-for="(item, index) in data.list">
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>
    <view class="loading">
      <uni-load-more :status="data.loadingStatus" />
    </view>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
  import { onMounted, reactive } from "vue"
  import { onLoad, onReachBottom } from "@dcloudio/uni-app"
  import http from "@/api/api.js"
  
  const data = reactive({
    classid: '',
    list: [],
    pageNum: 1,
    pageSize: 12,
    total: 0,
    isNoMore: false,
    loadingStatus: 'more'
  })
  
  onLoad((option) => {
    const classifyData = JSON.parse(decodeURIComponent(option.classify))
    if (classifyData._id) {
      data.classid = classifyData._id
      // 设置标题
      uni.setNavigationBarTitle({
        title: classifyData.name
      })
      getWallList()
    }
  })
  
  // 获取列表
  const getWallList = () => {
    data.loadingStatus = 'loading'
    http.getWallList({
      classid: data.classid,
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }).then(res => {
      data.list = [...data.list, ...res.data]
      uni.setStorageSync('classifyList', data.list);
      data.total = res.total
      data.isNoMore = data.pageNum * data.pageSize >= data.total
      if (data.isNoMore) {
        data.loadingStatus = 'no-more'
      } else {
        data.loadingStatus = 'more'
      }
    })
  }
  
  // 触底加载更多
  onReachBottom(() => {
    // 是否加载完成
    if (data.isNoMore) return
    data.pageNum++
    getWallList()
  })
  
</script>

<style lang="scss">
.layout {
  .content {
    display: grid;
    gap: 5rpx;
    grid-template-columns: repeat(3, 1fr);
    padding: 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
 